<template>
    <div>
        <el-form
            :model="role"
            ref="roleForm"
            :rules="rules"
            label-width="100px"
        >
            <el-form-item label="角色名:" prop="name">
                <el-input v-model="role.name"></el-input>
            </el-form-item>

            <el-form-item label="描述:">
                <el-input v-model="role.description"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit(roleForm)"
                    >确定</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { api } from '@/api/index'
const { RequestRoleAdd } = api
const emit = defineEmits(['close'])

const roleForm = ref(null)
const role = ref({ name: '', description: '' })
const rules = ref({
    name: [{ required: true, message: '请输入菜单名', trigger: 'blur' }],
})

const onSubmit = roleForm => {
    roleForm.validate(valid => {
        if (valid) {
            addRole(role.value)
            emit('close')
        }
    })
}

const addRole = role => {
    RequestRoleAdd(role).then(data => {
        if (data.resultCode === 1) {
            ElMessage.success('添加成功!')
        }
    })
}
</script>

<style lang="scss" scoped></style>
